<!--仅用于整合各种类型的输入模式，支持所有原本的属性和动作，input支持插槽-->
<template>
  <template v-if="!type || type === 'text' || type === 'input'">
    <q-input v-bind="$attrs" type="text">
      <template v-for="(index, name) in $slots" :key="name" #[name]="scope">
        <slot :name="name" v-bind="scope||{}"/>
      </template>
    </q-input>
  </template>
  <template v-else-if="type === 'number'">
    <q-input v-bind="$attrs" type="number"/>
  </template>
  <template v-else-if="type === 'textarea'">
    <q-input v-bind="$attrs" autogrow type="textarea" style="min-height: 80px;"/>
  </template>
  <template v-else-if="type === 'toggle'">
    <q-toggle v-bind="$attrs" :false-value="'0'" :true-value="'1'" style="min-height: 40px;"/>
  </template>
  <template v-else-if="type === 'select'">
    <q-select v-bind="$attrs" :options="options"/>
  </template>
  <template v-else-if="type === 'selectM'">
    <q-select multiple v-bind="$attrs" :options="options"/>
  </template>
  <template v-else-if="type === 'radio'">
    <q-field v-bind="$attrs">
      <template v-slot:control>
        <q-option-group inline v-bind="$attrs" :options="options" color="primary"/>
      </template>
    </q-field>
  </template>
  <template v-else-if="type === 'checkbox'">
    <q-field v-bind="$attrs">
      <template v-slot:control>
        <q-option-group inline v-bind="$attrs" :options="options" color="primary" type="checkbox"/>
      </template>
    </q-field>
  </template>
  <template v-else-if="type === 'slider'">
    <q-field v-bind="$attrs">
      <template v-slot:control>
        <q-slider v-bind="$attrs" :min="0" :max="100" label label-always class="q-mt-lg" style="width: 90%;" />
      </template>
    </q-field>
  </template>
  <!--  <template v-else-if="cfg.type === 'dateRange'">-->
  <!--    <DateRange :cfg="cfg" :formData="formData" :rules="rules"></DateRange>-->
  <!--  </template>-->
  <template v-else-if="type === 'datetime'">
    <q-input v-bind="$attrs" placeholder="年-月-日 时:分:秒"
             mask="####-##-## ##:##:##" lazy-rules>
      <q-popup-proxy transition-show="scale" transition-hide="scale" style="background-color: transparent;box-shadow: none;">
        <div class="row q-gutter-md">
          <q-date :model-value="$attrs.modelValue" @update:model-value="$attrs[`onUpdate:modelValue`]" mask="YYYY-MM-DD HH:mm:ss" color="primary"></q-date>
          <q-time :model-value="$attrs.modelValue" @update:model-value="$attrs[`onUpdate:modelValue`]" mask="YYYY-MM-DD HH:mm:ss" color="primary">
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="现在" @click="$attrs[`onUpdate:modelValue`](dayjs().format('YYYY-MM-DD HH:mm:ss'))" color="primary" flat />
              <q-btn v-close-popup label="确认" color="primary" flat />
            </div>
          </q-time>
        </div>
      </q-popup-proxy>
    </q-input>
  </template>
  <template v-else-if="type === 'date'">
    <q-input borderless dense v-bind="$attrs" placeholder="年-月-日"
             mask="####-##-##" lazy-rules>
      <q-popup-proxy transition-show="scale" transition-hide="scale" style="background-color: transparent;box-shadow: none;">
        <div class="row q-gutter-md">
          <q-date :model-value="$attrs.modelValue" @update:model-value="$attrs[`onUpdate:modelValue`]" mask="YYYY-MM-DD" color="primary">
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="现在" @click="$attrs[`onUpdate:modelValue`](dayjs().format('YYYY-MM-DD'))" color="primary" flat />
              <q-btn v-close-popup label="确认" color="primary" flat />
            </div>
          </q-date>
        </div>
      </q-popup-proxy>
    </q-input>
  </template>
  <template v-else-if="type === 'time'">
    <q-input v-bind="$attrs" placeholder="时:分" mask="##:##" lazy-rules>
      <q-popup-proxy transition-show="scale" transition-hide="scale" style="background-color: transparent;box-shadow: none;">
        <div class="row q-gutter-md">
          <q-time :model-value="$attrs.modelValue" @update:model-value="$attrs[`onUpdate:modelValue`]" mask="HH:mm:ss" color="primary">
            <div class="row items-center justify-end">
              <q-btn v-close-popup label="现在" @click="$attrs[`onUpdate:modelValue`](dayjs().format('HH:mm:ss'))" color="primary" flat />
              <q-btn v-close-popup label="确认" color="primary" flat />
            </div>
          </q-time>
        </div>
      </q-popup-proxy>
    </q-input>
  </template>
</template>

<script setup>
import dayjs from 'dayjs';
import {ref, useAttrs} from "vue";
const props = defineProps({
  type: String,
  options: {
    default: () => []
  }
})
const attrs = useAttrs()
</script>

<style scoped>

</style>
